<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>2.天气案例_监视属性</title>
    <script src="../js/vue.min.js"></script>
</head>

<body>
    <div id="root">
        <h2>天气很 {{weather}} </h2>
        <button @click="isHot = !isHot">切换天气</button>

    </div>

    <script type="text/javascript">
        const vm = new Vue({
            el: '#root',
            data() {
                return {
                    isHot: true
                }
            },
            methods: {
                /*   changeWeather() {
                      this.isHot = !this.isHot;
                  } */
            },
            computed: {
                weather() {
                    return this.isHot ? '炎热' : '凉爽';
                }
            },
            /* watch: {
                isHot: {
                    //  默认值是 false 。改成 true 时。页面初始化的时候会调用一下 handler 函数
                    immediate: true,
                    // 当属性 isHot 发生了改变，处理 handler 的调用
                    handler(newValue, oldValue) {
                        console.log('isHot 发生了变化', newValue, oldValue);
                    }
                }
            } */
        });
        vm.$watch('isHot', {
            //  默认值是 false 。改成 true 时。页面初始化的时候会调用一下 handler 函数
            immediate: true,
            // 当属性 isHot 发生了改变，处理 handler 的调用
            handler(newValue, oldValue) {
                console.log('isHot 发生了变化', newValue, oldValue);
            }
        });
    </script>

</body>

</html>